<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片预加载</title>
</head>
<body>
  <!-- 图片过大时 会出现卡顿情况， 一段一段的渲染出来 -->
  <!-- <div id="imgBox" style="width: 600px;height: 1000px;background-color: #ccc;">
    <img src="https://w.wallhaven.cc/full/72/wallhaven-72rd8e.jpg" alt="" width="100%" />
  </div> -->

  <div id="imgBox" style="width: 600px;background-color: #ccc;">
    <img src="https://w.wallhaven.cc/full/72/wallhaven-72rd8e.jpg" alt="" width="100%" />

  </div>

  <script>
    const oImgBox = document.querySelector('#imgBox');
    // 采用 new Image() 方式，当onload 时 是当加载完毕后才出来的
    // const oImg = new Image();
    // oImg.src = 'https://w.wallhaven.cc/full/72/wallhaven-72rd8e.jpg';
    // oImg.style.width = '100%';
    // oImg.onload = function () {
    //   oImgBox.appendChild(oImg);
    // }

    // 多图时
    const imgSrcArr = [
      'https://w.wallhaven.cc/full/z8/wallhaven-z8dg9y.png',
      'https://w.wallhaven.cc/full/pk/wallhaven-pkw6y3.jpg',
      'https://w.wallhaven.cc/full/e7/wallhaven-e7ek7k.jpg',
      'https://w.wallhaven.cc/full/72/wallhaven-72rxqo.jpg',
    ];

    imgSrcArr.forEach(item => {
      const oImg = new Image();
      oImg.src = item;
      oImg.style.width = '100%';

      oImg.onload = function() {
        oImgBox.appendChild(oImg);
      }
    })

  </script>
</body>
</html>